<template>
	<view class="container"> 
	  <image class="bg-set" src="../../static/image/bg1.jpg"></image>
	  <view class="content">
		  <view class="title">
			  <view class="item">
				  <view class="name selected">留言墙</view>
				  <u-gap style="border-radius: 30rpx;width: 50%;margin-left: auto;margin-right: auto;" height="8" marginTop="-5" bgColor="rgb(43,90,237)"></u-gap>
			  </view>
			  <view class="item">
			  	  <view class="name" @tap="toPicture">照片墙</view>
			  </view>
		  </view>
		  <view class="subtitle">
			  <u-tabs
			          :list="tabs"
			          lineWidth="30"
			          lineColor="#00aaff"
			          :activeStyle="{
			              color: '#303133',
			              fontWeight: 'bold',
			              transform: 'scale(1.05)',
			          }"
			          :inactiveStyle="{
			              color: '#606266',
			              transform: 'scale(1)'
			          }"
			          itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
					  @change="selectType"
			      >
			      </u-tabs>
		  </view>
		  <view class="body">
			  <view class="body-title">留言墙</view>
			  <view class="body-subtitle">很多事情值得记录，当然也值得回味。</view>
			  <view class="message-container">
				  <view v-for="(message,index) in messages" :key="index" :class="['message','color'+message.color]">
					  <view class="head">
						  <view class="time" @tap="showTime(message.time)">{{message.time.substring(0,11)}}</view>
						  <view style="margin-left: 20rpx;" class="time">{{message.address==null?'未知':message.address}}</view>
						  <view @tap="deleteConfirm(message.id)" v-show="showDelete(message.time)" style="margin-left: 20rpx;color: red;" class="time">撕掉</view>
						  <view class="type">{{message.label}}</view>
					  </view>
					  <view class="message-body" @tap="clickComment(index)">
						  <text selectable="true">
							    {{message.content}}
						  </text>
					  </view>
					  <view class="foot">
						  <view class="option" @tap="clickLike(index)">
							<u-icon :name="message.liked?'heart-fill':'heart'" :color="message.liked?'red':'black'" size="20"></u-icon>{{message.likes}}
						  </view>
						  <view class="option" @tap="clickComment(index)">
						  	<u-icon name="chat" size="20"></u-icon>{{message.comment==null?0:message.comment}}
						  </view>
						  <view class="name">{{message.name}}</view>
					  </view>
				  </view>
				  <u-divider @tap="showMore" :text="hasMore?'点击加载更多':'已加载全部留言'"></u-divider>
				  <view style="height: 200rpx;"></view>
				  <view class="add-button">
					  <u-icon v-show="scrollHeight>100" @tap="scrollTop" name="arrow-up-fill" color="black" size="60"></u-icon>
					  <u-icon @tap="show=true" name="plus-circle-fill" color="black" size="60"></u-icon>
				  </view>
			  </view>
		  </view>
	  </view>
	  
	 <u-popup
		:safeAreaInsetBottom="true"
		:safeAreaInsetTop="true"
		:mode="popupData.mode"
		:show="show"
		:round="popupData.round"
		:overlay="popupData.overlay"
		:borderRadius="popupData.borderRadius"
		:closeable="popupData.closeable"
		:closeOnClickOverlay="popupData.closeOnClickOverlay"
		@close="show = false"
		@open="open"
	>
		<view class="u-popup-slot">
			<view class="pop-title">免责声明</view>
			<textarea disabled style="color: rgb(148,148,148);font-weight: 500;font-size: 25rpx;" v-model="declaration"></textarea>
			<view class="pop-title">写留言</view>
			<view class="pop-colors">
				<view @tap="changeColor(1)" style="background-color: rgb(219,244,249);" :class="['color',selectedColor===1?'selected':'']"></view>
				<view @tap="changeColor(2)" style="background-color: rgb(255,246,222);" :class="['color',selectedColor===2?'selected':'']"></view>
				<view @tap="changeColor(3)" style="background-color: rgb(239,228,252);" :class="['color',selectedColor===3?'selected':'']"></view>
				<view @tap="changeColor(4)" style="background-color: rgb(168,237,138);" :class="['color',selectedColor===4?'selected':'']"></view>
				<view @tap="changeColor(5)" style="background-color: rgb(252,175,162);" :class="['color',selectedColor===5?'selected':'']"></view>
			</view>
			<view :class="['pop-message','color'+selectedColor]">
				<textarea v-model="text" placeholder="留言" maxlength="150" class="pop-input">
				
				</textarea>
				<view style="float: right;color: rgb(148,148,148)">{{text.length+'/150'}}</view>
				<input style="border: 5rpx solid white;padding: 5rpx; width: 98%;" v-model="name" maxlength="10" placeholder="昵称" />
			</view>
			<view class="pop-title">选择标签</view>
			<view class="labels">
				<view :class="['label',selectedLable===label.name?'selected':'']" v-show="label.name!='全部'" v-for="(label,index) in tabs" :key="index" @tap="selectedLable = label.name">
					<text class="name">{{label.name}}</text>
				</view>
			</view>
			<view class="buttons" >
				<u-button
					class="button"
				    text="丢弃"
				    size="normal"
				    plain
				    shape="circle"
				    type="primary"
					@tap="show = false"
				></u-button>
				<u-button
					class="button"
				    text="确定"
				    size="normal"
				    plain
				    shape="circle"
				    type="success"
					@tap="submit"
				></u-button>
			</view>
		</view>
	</u-popup>
	<u-toast ref="uToast"></u-toast>
	</view> 
</template>

<script>
	export default {
		onLoad() {
			let that = this
			uni.request({
				url: this.requestUrl+'/message/type',
				method:"GET",
				success(res) {
					let data = res.data;
					if(data.code!=='1'){
						uni.showToast({
							icon:"error",
							title:data.message
						})
					}else{
						let arr = data.data;
						that.tabs = [{name:'全部'}]
						for(let i=0;i<arr.length;i++){
							that.tabs.push({name:arr[i]})
						}
					}
				}
			})
			this.getMessageList();
		},
		data() {
			return {
				requestUrl:'http://whczff.xyz:8010',
				popupData: {
					overlay: true,
					mode: 'bottom',
					closeable: true,
					closeOnClickOverlay: true
				},
				declaration: 'serenity是本人独自开发的，为便于与用户交流的留言平台'+
							'。请不要利用此平台服务、制作、上传、下载、复制、发布、传播'+
							'或者转载如下内容:\n'+
							'1、反对宪法所确定的基本原则的;\n'+
							'2、危害国家安全，泄露国家秘密，颠覆国家政权,破坏国家统一的;\n'+
							'3、榻害国家荣誉和利益的;\n'+
							'以及其他任何涉嫌违法的内容',
				name: '匿名',
				text: '',
				scrollHeight: 0,
				show: false,
				selectedColor: 1,
				selectedLable: '无题',
				hasMore: true,
				 tabs: [],
				 pageNum:1,
				 pageSize: 10,
				 type:'',
				messages:[],
			
			}
		},
		onPageScroll(e) {
			this.scrollHeight = e.scrollTop
		},
		onReachBottom() {
			this.showMore();
		},
		onPullDownRefresh() {
			this.messages = []
			this.pageNum = 1
			this.getMessageList();
			uni.stopPullDownRefresh();
			uni.showToast({
				title:'刷新成功！',
				icon:'none'
			})
		},
		methods: {
			deleteConfirm(id){
				let that = this;
				uni.showModal({
					title:'是否撕掉该留言',
					content:'1分钟后胶水干了就不能撕了~',
					confirmText:'确定',
					confirmColor:'#D94B4D',
					cancelText:'取消',
					success: (res) => {
						if(res.confirm){
							that.deleteMessage(id)
						}
					}
				})
			},
			deleteMessage(id){
				let that = this
				uni.request({
					url:this.requestUrl+'/message/delete?id='+id,
					method:"GET",
					success(res) {
						if(res.data.code!=='1'){
							uni.showToast({
								icon:"error",
								title:res.data.message
							})
						}else{
							that.pageNum = 1
							that.messages = []
							that.getMessageList()
							uni.showToast({
								icon:"success",
								title:'胶水还没干，成功撕下来了~'
							})
						}
					}
				})
			},
			showDelete(time){
				let now = new Date()
				if((now - new Date(time))/1000>60)
					return false;
				return true;
			},
			submit(){
				if(!this.show) return
				if(this.text.trim()==''||this.name.trim()==''){
					this.show = false
					uni.showToast({
						icon:"none",
						title:'请留下你的痕迹吧~',
					})
					return
				}
				let params = {
					name: this.name.trim(),
					content: this.text.trim(),
					label: this.selectedLable,
					color: this.selectedColor
				}
				this.show = false
				let that = this
				uni.showLoading({
					title:'贴上墙ing···'
				})
				uni.request({
					url:this.requestUrl+'/message/post',
					method:"POST",
					header:{
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:params,
					success(res) {
						if(res.data.code!=='1'){
							uni.showToast({
								icon:"error",
								title:res.data.message
							})
						}else{
							that.pageNum = 1
							that.messages = []
							that.getMessageList()
							uni.showToast({
								icon:"none",
								title:'留言成功啦~'
							})
							uni.hideLoading()
							that.text = ''
						}
					},
					fail() {
						uni.showToast({
							icon:"none",
							title:'留言失败了~'
						})
						uni.hideLoading()
					}
				})
			},
			selectType(e){
				if(e.name==this.type) return;
				this.pageNum = 1
				this.messages = []
				if(e.name=='全部')	this.type = ''
				else this.type = e.name
				this.getMessageList()
			},
			getMessageList(){
				let that = this
				let params
				if(this.type!='')
					params = {
						pageNum:this.pageNum,
						pageSize:this.pageSize,
						label:this.type,
						type: 'text'
					}
				 else
				 params = {
				 	pageNum:this.pageNum,
				 	pageSize:this.pageSize,
					type: 'text'
				 }
				uni.request({
					url:this.requestUrl+'/message/list',
					method:"POST",
					header:{
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:params,
					success(res) {
						if(res.data.code!=='1'){
							uni.showToast({
								icon:"error",
								title:res.data.message
							})
						}else{
							let data = res.data.data;
							that.hasMore = data.hasNextPage
							that.messages = that.messages.concat(data.list)
						}
					}
				})
			},
			toPicture(){
				uni.reLaunch({
					url:'./image'
				})
			},
			showTime(time){
				uni.showToast({
					icon: 'none',
					title: time
				})
			},
			clickComment(index){
				uni.navigateTo({
					url:'./comment?id='+this.messages[index].id,
					animationType: 'slide-in-right'
				})
			},
			showMore(){
				if(!this.hasMore){
					uni.showToast({
						icon:"none",
						title:'已加载全部~'
					})
					return
				}
				this.pageNum ++
				this.getMessageList()
			},
			clickLike(index){
				if(this.messages[index].liked){
					uni.showToast({
						icon:"none",
						title:'你已经点过赞啦~'
					})
					return
				}
				let that = this
				uni.request({
					url:this.requestUrl+'/message/like?id='+this.messages[index].id,
					method:"GET",
					success(res) {
						if(res.data.code!=='1'){
							uni.showToast({
								icon:"error",
								title:res.data.message
							})
						}else{
							that.messages[index].liked = true
							that.messages[index].likes ++
							uni.showToast({
								icon:"none",
								title:'♥'
							})
						}
					}
				})
				
			},
			scrollTop(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
			open(){
				
			},
			close(){
				
			},
			changeColor(index){
				this.selectedColor = index
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "@/uni_modules/uview-ui/index.scss";
	.u-popup-slot {
		height: 1300rpx;
		position: relative;
		padding: 30rpx;
		.buttons{
			position: fixed;
			bottom: 10rpx;
			display: flex;
			width: 90%;
			.button{
				margin-left: auto;
				margin-right: auto;
			}
		}
		.labels{
			display: grid;
			/* 指定每一行的宽度 每个宽度中间用空格隔开 */
			grid-template-columns: 150rpx 150rpx 150rpx 150rpx 150rpx;
			.label{
				text-align: center;
				margin-top: 20rpx;
				padding: 5rpx;
				.name{
					font-weight: 600;
				}
			}
			.selected{
				border-radius: 40rpx;
				background-color: rgb(235,235,235);
			}
		}
		.pop-message{
			margin-top: 20rpx;
			padding: 20rpx;
			border-radius: 5rpx;
			margin-bottom: 20rpx;
			.pop-input{
				font-family: 'myFont';
				width: 100%;
			}
			input{
				font-family: 'myFont';
			}
		}
		.pop-title{
			font-weight: bold;
			font-size: 40rpx;
			margin-top: 0rpx;
		}
		.pop-colors{
			margin-top: 20rpx;
			display: flex;
			.color{
				margin-right: 15rpx;
				width: 50rpx;
				height: 50rpx;
				background-color: aqua;
			}
			.selected{
				border: solid steelblue;
			}
		}
	}
	.add-button{
		position: fixed;
		right: 8%;
		bottom: 5%;
	}
	.color1{
		background-color: rgb(219,244,249);
	}
	.color2{
		background-color: rgb(255,246,222);
	}
	.color3{
		background-color: rgb(239,228,252);
	}
	.color4{
		background-color: rgb(168,237,138);
	}
	.color5{
		background-color: rgb(252,175,162);
	}
	.message-container{
		display: flex;
		flex-flow: wrap;
		width: 100%;
	}
	.message{
		box-shadow: 5px 5px 5px #3f3f3f;
		border-radius: 10rpx;
		padding: 20rpx;
		font-size: 30rpx;
		margin-bottom: 10%;
		min-width: 600rpx;
		margin-right: 50rpx;
		.head{
			font-size: 25rpx;
			font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
			position: relative;
			display: flex;
			.time{
				color: rgb(148,148,148);
			}
			.type{
				position: absolute;
				right: 0;
				color: rgb(148,148,148);
			}
		}
		.message-body{
			margin-top: 5%;
			margin-left: 3%;
			margin-right: 3%;
			font-family: 'myFont';
			font-size: 35rpx;
			word-wrap: break-word
		}
		.foot{
			margin-top: 5%;
			color: rgb(148,148,148);
			position: relative;
			display: flex;
			.option{
				font-size: 30rpx;
				display: flex;
				margin-right: 5%;
			}
			.name{
				font-weight: 800;
				font-size: 40rpx;
				font-family: 'myFont';
				right: 0;
				color: black;
				position: absolute;
			}
		}
	}
	.body{
		margin-top: 8%;
		margin-left: 8%;
		margin-right: 8%;
		.body-title{
			font-size: 50rpx;
			font-weight: 800;
		}
		.body-subtitle{
			color: srgb(66, 66, 66);
			font-size: 10px;
			font-weight: 300;
			margin-top: 3%;
			margin-bottom: 5%;
		}
	}
	.bg-set{
	    position: fixed;
	    width: 105%;
	    height: 105%;
	    top: -2.5%;
	    left: -2.5%;
	    z-index: -1;
		filter: blur(10rpx);
	}
	.title{
		justify-content: center;
		align-items: center;
		display: flex;
		.item{
			margin-top: 20rpx;
			.name{
				margin: 25rpx;
				font-weight: 100;
				font-family: Verdana, Geneva, Tahoma, sans-serif;
			}
			.selected{
				font-weight: 1000 !important;
			}
		}
	}
	.subtitle{
		margin-top: 20rpx;
		padding-right: 10rpx;
	}
</style>
